<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 培训实施
        </el-breadcrumb-item>
        <el-breadcrumb-item>新建培训项目</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <div>
        <p style="color: green">基本信息</p>
      </div>
      <br />
      <!-- 上传封面-->
      <div class="file">
        <input
          type="file"
          class="updata"
          accept="image/*"
          @change="change($event)"
          ref="updata"
        />
        <img :src="imageUrl ? imageUrl : baseImg" alt="" class="img" />
      </div>
      <br />

      <div class="form-box">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
          <el-form-item
            label="培训标题"
            prop="training_title"
            style="width: 400px"
          >
            <el-input v-model="form.training_title"></el-input>
          </el-form-item>
          <el-form-item
            label="培训形式"
            prop="training_form"
            style="width: 400px"
          >
            <el-input v-model="form.training_form"></el-input>
          </el-form-item>
          <el-form-item
            label="培训计划"
            prop="training_plan"
            style="width: 400px"
          >
            <el-input v-model="form.training_plan"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="principal" style="width: 400px">
            <el-input v-model="form.principal"></el-input>
          </el-form-item>

          <el-form-item
            label="培训类别"
            prop="training_classes"
            style="width: 400px"
          >
            <el-input v-model="form.training_classes"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="describe" style="width: 400px">
            <el-input v-model="form.describe"></el-input>
          </el-form-item>
          <el-form-item
            label="推荐等级"
            prop="recommended_level"
            style="width: 400px"
          >
            <el-input v-model="form.recommended_level"></el-input>
          </el-form-item>
          <el-form-item
            label="培训状态"
            prop="training_status"
            style="width: 400px"
          >
            <el-input v-model="form.training_status"></el-input>
          </el-form-item>
          <el-form-item
            label="培训预算"
            prop="training_budget"
            style="width: 400px"
          >
            <el-input v-model="form.training_budget"></el-input>
          </el-form-item>

          <p style="color: green">报名设置</p>
          <br />

          <el-form-item
            label="报名人数"
            prop="registration_number"
            style="width: 400px"
          >
            <el-input v-model="form.registration_number"></el-input>
          </el-form-item>
          <el-form-item
            label="报名审核"
            prop="SignUp_review"
            style="width: 400px"
          >
            <el-input v-model="form.SignUp_review"></el-input>
          </el-form-item>
          <el-form-item label="截止时间">
            <el-col :span="11">
              <el-form-item prop="deadline_date">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.deadline_date"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="deadline_time">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.deadline_time"
                  style="width: 100%"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="报名形式" prop="registration_type">
            <el-checkbox-group v-model="form.registration_type">
              <el-checkbox label="页面报名" name="type"></el-checkbox>
              <el-checkbox label="手动添加" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <p style="color: green">培训设置</p>
          <br />

          <el-form-item label="开始时间">
            <el-col :span="11">
              <el-form-item prop="start_date">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.start_date"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="start_time">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.start_time"
                  style="width: 100%"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-col :span="11">
              <el-form-item prop="end_date">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.end_date"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="end_time">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.end_time"
                  style="width: 100%"
                >
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item
            label="学习形式"
            prop="ways_of_learning"
            style="width: 400px"
          >
            <el-input v-model="form.ways_of_learning"></el-input>
          </el-form-item>
          <el-form-item label="是否签到" prop="sign_in" style="width: 400px">
            <el-input v-model="form.sign_in"></el-input>
          </el-form-item>
          <el-form-item
            label="培训地点"
            prop="training_place"
            style="width: 400px"
          >
            <el-input v-model="form.training_place"></el-input>
          </el-form-item>
          <el-form-item
            label="培训讲师"
            prop="training_lecturer"
            style="width: 400px"
          >
            <el-input v-model="form.training_lecturer"></el-input>
          </el-form-item>
          <el-form-item label="证书" prop="certificate" style="width: 400px">
            <el-input v-model="form.certificate"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">取消</el-button>
      </el-form-item>
    </div>
  </div>
</template>



<script>
//提交表单
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
export default {
  name: "baseform",
  setup() {
    const options = [];
    const rules = {
      name: [{ required: true, message: "不能为空", trigger: "blur" }],
    };
    const formRef = ref(null);
    const form = reactive({
      training_title: "",
      training_form: "",
      training_plan: "",
      principal: "",
      training_classes: "",
      describe: "",
      recommended_level: "",
      training_status: "",
      training_budget:"",
      registration_number: "",
      SignUp_review: "",
      deadline_date: "",
      deadline_time: "",
      registration_type: "",
      start_date: "",
      start_time: "",
      end_date: "",
      end_time: "",
      ways_of_learning: "",
      sign_in: "",
      training_place: "",
      training_lecturer: "",
      certificate: "",

      // options: [],
    });
    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          console.log(form);
          ElMessage.success("提交成功！");
        } else {
          return false;
        }
      });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };

    return {
      options,
      rules,
      formRef,
      form,
      onSubmit,
      onReset,
    };
  },

  //   //上传封面
  //   data() {
  //     return {
  //       // 上传的图片
  //       imageUrl: "",

  //       // 默认的图片
  //       baseImg: "",
  //     };
  //   },
  //   methods: {
  //     change(e) {
  //       console.log(e.target.files[0].name);
  //       // 判断是不是规定格式
  //       // let name  =  e.target.files[0].name

  //       // 获取到第一张图片
  //       let file = e.target.files[0];

  //       // 创建文件读取对象
  //       var reader = new FileReader();
  //       var that = this;

  //       //  将文件读取为DataURL
  //       reader.readAsDataURL(file);

  //       // 读取成功调用方法
  //       reader.onload = (e) => {
  //         console.log("读取成功");

  //         // e.target.result 获取 读取成功后的  文件DataURL
  //         that.imageUrl = e.target.result;

  //         // 如果要将图片上传服务器，就在这里调用后台方法
  //       };
  //     },
  //   },
  //   created() {
  //     // 获取默认显示的图片
  //     this.baseImg = require("./pic/1.jpg");
  //   },
  //   mounted() {

  //   },
};
</script>